{% extends "base.html" %} 
{% load staticfiles %} 
{% block css %}
<style>
	.black_overlay {
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .50;
		filter: alpha(opacity=80);
	}
	
	.white_content {
		display: none;
		position: absolute;
		top: 10%;
		left: 10%;
		width: 80%;
		height: 80%;
		border: 8px solid lightblue;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid ">
	<div class="row ">

		<div class="col-md-11" style="text-align: center;">
			<form class="form-inline" action="http://localhost:8000/leavingMessageSelectAll/" id="searchForm" method="post">
				<div class="form-group">
					<label for="exampleInputName2">用户名:</label>
					<input type="text" class="form-control" id="exampleUsername" name="userid" placeholder="用户名">
					<label for="exampleInputName2">留言状态:</label>
					<select name="status" class="form-control" id="myStatus">
						<option value="0">未知</option>
						<option value="1">已读</option>
						<option value="2">未读</option>
					</select>
				</div>
				<input type="submit" id="tijiao" class="btn btn-success mybtn" aria-hidden="true" value="留言查询">
			</form>
		</div>
		<table class="table">
			<thead>
				<tr>
					<th colspan="11" id="dataShuJu">

						<button class="btn btn-default trash AllDelete"><span class = "glyphicon glyphicon-trash">批量已读</span></button>
						

					</th>
				</tr>
			</thead>

			<!--<caption><strong style="color: #000000;">商品列表</strong></caption>--> 
			<thead>
				<tr>
					<th class="info nature">
						<input type="checkbox" id="checkbox-all">
					</th>
					<th>留言序号</th>
					<th>用户ID</th>
					<th>用户名</th>
					<th>留言内容</th>
					<th>留言时间</th>
					<th>状态</th>
					<th>编辑</th>
				</tr>
			</thead>
			<tbody id="userTable">

			</tbody>
			<!--<tbody id="mytbody" class="myListTable">

			</tbody>-->
		</table>
		
		<div class="text-center">
			<ul id="visible-pages-example"></ul>
		</div>
		<div class="text-center">
			<ul id="aaa"></ul>
		</div>

	</div>
	<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false" data-show="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">Modal title</h4>
				</div>
				<div class="modal-body">
					<p>One fine body&hellip;</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	
	<!--弹出层时背景层DIV-->
	<div id="fade" class="black_overlay">
	</div>
	<div id="MyDiv" class="white_content" style="height: 800px;">
		<div style="text-align: right; cursor: default; height: 40px;" id="move">
			<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
		</div>
		<!--目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。-->
		<div id="">
			<div>
				<h1>留言内容：</h1>
			</div>
			<div id="btns">
				<div id="leavingMessageOne" style="height: 250px;border: 2px solid bisque;width: 100%;font-size: 20px;overflow: auto;">
				</div>
				<br />
				<div style="height: 200px; border: 1px solid seagreen;width: 100%;overflow: auto;font-size: 20px;" contentEditable="true" placeholder="输入回复内容">
				</div>
				<div style="text-align: center;">
					<button class="btn btn-default replyLeavingMess" style="position: absolute;bottom: 0px;">回复</button>
				</div>
				<br />
			</div>
		</div>
	</div>

	{% endblock %} {% block contentRight %}

	<ol class="breadcrumb">
		<li>
			<a href="#"><i class="fa fa-dashboard"></i> Home</a>
		</li>
		<li class="active">留言管理</li>
	</ol>

	{% endblock %} {% block contentLeft %} 留言表
	<small>Version 5.0</small> {% endblock %}
	{% block script %}
	<script type="text/javascript">
		console.log("******************")
		var mainData = ""
		var defaultPageOptioins = "";
		function callLeavingFn(leavingMessageData){
			console.log(leavingMessageData)
			mainData = leavingMessageData
			dataParse(leavingMessageData)
			var allDataNumber = leavingMessageData.length;
			var ssss = '<label id="userNumber" class="count" style="float: right; padding-right: 4%;">共有'+ allDataNumber +'条数据</label>'
			$('#dataShuJu').append(ssss)
			for(var sss = 0;sss<leavingMessageData.length;sss++){
				var userName = leavingMessageData[sss]["username"]
				var userLeaveMessage = leavingMessageData[sss]["leavemessage"]
				var userid = leavingMessageData[sss]["userid"]
				var userLeavTime = leavingMessageData[sss]["leavtime"]
				var userStatus = leavingMessageData[sss]["status"]
				var guestbookid = leavingMessageData[sss]["guestbookid"]
				if (userStatus == "unread"){
					userStatus = "未读";
					userStatusColour = "red"
				}else{
					userStatus = "已读"
					userStatusColour = ""
				}
				
				var myHtml = '<tr class="mytr" guestbookid="' + guestbookid + '"><td class="info ele"><input class="checkbox-one" name="checkbox-one" type="checkbox"/></td><td>' + guestbookid + '</td><td>' + userid + '</td><td>' + userName + '</td><td>' + userLeaveMessage + '</td><td>' + userLeavTime + '</td><td style = "color:' + userStatusColour + ';">' + userStatus + '</td><td > <button class="btn btn-default delete guestbookidButton">编辑</button></td></tr>'
				$(".myListTable").append(myHtml)
			}
		}
		function createList(page) {
			$("#userTable").empty()
			for(sss = 0; sss < mainData.length; sss++) {
				if(sss >= (page - 1) * 10 && sss <= page * 10 - 1) {
					var userName = mainData[sss]["username"]
					var userLeaveMessage = mainData[sss]["leavemessage"]
					var userid = mainData[sss]["userid"]
					var userLeavTime = mainData[sss]["leavtime"]
					var userStatus = mainData[sss]["status"]
					var guestbookid = mainData[sss]["guestbookid"]
					if (userStatus == "unread"){
					userStatus = "未读";
					userStatusColour = "red"
					}else{
						userStatus = "已读"
						userStatusColour = ""
					}
					var myHtml = '<tr class="mytr" guestbookid="' + guestbookid + '"><td class="info ele"><input class="checkbox-one" name="checkbox-one" type="checkbox"/></td><td>' + guestbookid + '</td><td>' + userid + '</td><td>' + userName + '</td><td>' + userLeaveMessage + '</td><td>' + userLeavTime + '</td><td style = "color:' + userStatusColour + ';">' + userStatus + '</td><td > <button class="btn btn-default delete guestbookidButton">编辑</button></td></tr>'
					
					$("#userTable").append(myHtml);
				}
				
			}
			var listNumber = ""
			$(".guestbookidButton").click(function () {
				var btnIndex = $(this).parents(".mytr").index();
				listNumber = btnIndex
				ShowDiv('MyDiv','fade' , mainData[btnIndex])
			});
			$(".replyLeavingMess").click(function(){
				
				console.log(mainData[listNumber])
				console.log("回复按钮")
			})
			
		}
		
		
		//弹出隐藏层
			function ShowDiv(show_div, bg_div , userLeaveMessage) {
				document.getElementById(show_div).style.display = 'block';
				document.getElementById(bg_div).style.display = 'block';
				var bgdiv = document.getElementById(bg_div);
				bgdiv.style.width = document.body.scrollWidth;
				// bgdiv.style.height = $(document).height();
				$("#" + bg_div).height($(document).height());
				
				userLeaveMessage = userLeaveMessage["leavemessage"]
				console.log(userLeaveMessage)
				
				var myHtml = '<div>'+ userLeaveMessage +'</div>'
				$("#leavingMessageOne").children('div').remove();
				$("#leavingMessageOne").append(myHtml)
			};
			//关闭弹出层
			function CloseDiv(show_div, bg_div) {
				document.getElementById(show_div).style.display = 'none';
				document.getElementById(bg_div).style.display = 'none';
			};
			
			$('#checkbox-all').click(function() {
				if($('#checkbox-all').is(':checked')) {
					$(".checkbox-one").prop("checked", true);
				} else {
					$(".checkbox-one").prop("checked", false);
				}
			})
			
			//全选按钮
			$(".AllDelete").click(function() {
				var isEmeptySelect = true;
				var deleLen = []
				var that = ""
				var thatAll = []
				$("[name = checkbox-one]:checkbox").each(function() {
					if($(this).is(":checked")) {
						isEmeptySelect = false;
						that = $(this).parents('tr');
						var objData = that.attr('guestbookid')
						deleLen.push(objData)
						thatAll.push(that)
					}
				})
				console.log(thatAll)
				deleteOneDataById(deleLen , thatAll)
				console.log("&&&&&&&&&&&&&^^^^^^^^^^^^^")
				console.log(deleLen)
				if (isEmeptySelect == true) {
		            console.log("000000");
		            layer.msg("选择要标记的内容");
		        }
			})
			
		
		function deleteOneDataById(objId, ele) {
			console.log("&&&&&&&&&&&&&8888888888888888888888^^^^^^^^^^^^^")
			console.log(ele.length)
			myPost("leavingMessDelete", {
				data: objId
			}, function(data) {
				// 警告,需要加判断,服务器删除成功之后才能移除标签 
				// 另外删除成功之后 要增加弹框提示
				if (data.status == "ok") {
					layer.msg("操作成功");
					for(var ssA = 0;ssA< ele.length;ssA++){
						console.log(ssA)
						var tdLength = $(ele[ssA]).children("td").length;
						var bianjiTd = $(ele[ssA]).children("td")[tdLength - 2]
						$(bianjiTd).text("已读")
					}
					
				} else {
					layer.msg("操作失败");
				}
			})
		}
		
		//留言查询分页
		$('#searchForm').on('submit', function(e) {
			e.preventDefault();
			$(this).ajaxSubmit({
				success: function(data) {
					console.log(data)
					if (data.status == "ok"){
						layer.msg(data.message);
						var ss = []
						
						for(var ww = 0;ww<data["data"].length;ww++){
//							console.log(data["data"][ww])
							ss.push(data["data"][ww])
						}
//						console.log(ss)
						mainData = ss
						$('.mytr').remove();
//						document.getElementById("exampleUsername").value = "";
						createList(1);
						defaultPageOptioins = {
							totalPages: Math.ceil(data["data"].length / 10),
							first: "首页",
							last: "尾页",
							prev: '上一页',
							next: '下一页',
							startPage: 1,
							visiblePages: 5,
							version: '1.1',
							onPageClick: function(event, page) {
								console.log("---------------------" , page);
								createList(page);
							}
						}
						$('#visible-pages-example').twbsPagination('destroy');
						$('#visible-pages-example').twbsPagination(defaultPageOptioins);
						
					}else{
						layer.msg(data.message);
					}

				}
			})
		});
		
		//分页页面进来
		
		function dataParse(data) {
			console.log(data);
			createList(1)

			mainData = data
			defaultPageOptioins = {
				totalPages: Math.ceil(data.length / 10),
				first: "首页",
				last: "尾页",
				prev: '上一页',
				next: '下一页',
				startPage: 1,
				visiblePages: 5,
				version: '1.1',
				onPageClick: function(event, page) {
					console.log("---------------------" , page);
					createList(page);
				}
			}
			$('#visible-pages-example').twbsPagination(defaultPageOptioins);
		}
		
	</script>
	{% endblock %}